<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #div1 {
            box-sizing: border-box;
            width: 300px;
            height: 550px;
            /* margin: 0 auto; */
            padding: 20px 15px;
            text-align: center;
            border: 1px solid #ff0000;
            margin: 0 auto;
        }
        
        #div1 img {
            width: 280px;
            height: 450px;
        }
        
        .div2 {
            margin: 0 auto;
            width: 300px;
            height: 200px;
        }
        
        .span1 {
            margin: 0 auto;
        }
        
        .s {
            float: left;
        }
        
        #btn1 {
            float: left;
        }
        
        #shuliang {
            float: left;
        }
        
        #btn2 {
            float: left;
        }
        
        .ji {
            height: 22px;
        }
        
        .p1 {
            font-size: 20px;
            font-weight: 750;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <div id="div1">
        <img src="./images/2.jpg" alt="">
        <a href="#"></a>
        <span class="span1">纪梵希 小羊皮口红304</span>
        <p class="p1">单价¥<i id="jiage">340</i></p>
        <div class="ji">
            <span class="s">数量</span><button id="btn1">-</button>
            <input type="text" id="shuliang" value="0" min="0" style="text-align: center;">
            <button id="btn2">+</button>
        </div>
        <p>总价¥:<span id="zongjia">0</span></p>
    </div>
    <script>
        var n1 = Number(shuliang.value);

        btn2.onclick = function() {
            n1 = n1 + 1
            shuliang.value = n1
            console.log(n1)
            zongjia.innerHTML = (jiage.innerHTML * 1) * (n1 * 1).toFixed(2)
        }
        btn1.onclick = function() {
            n1 = n1 - 1
            if (n1 <= 0) {
                n1 = 0
            }
            shuliang.value = n1
            console.log(n1)
            zongjia.innerHTML = (jiage.innerHTML * 1) * (n1 * 1).toFixed(2)

        }
    </script>

</body>

</html>